﻿<div class="wikidoc"><h1>Validation, Model Validation</h1>
This example explains how to use the model validation.<br>
<button id="ModelValidationExample" class="try-example-button">Try Example</button>
<h2>UI Model</h2>
<div style="color:Black;background-color:White;"><pre>{
    <span style="color:#A31515;">"windows"</span>: [
        {
            <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"ModelValidationExample"</span>,
            <span style="color:#A31515;">"title"</span>: <span style="color:#A31515;">"Model Validation Example"</span>,
            <span style="color:#A31515;">"left"</span>: 500,
            <span style="color:#A31515;">"top"</span>: 100,
            <span style="color:#A31515;">"width"</span>: 400,
            <span style="color:#A31515;">"height"</span>: 400,
            <span style="color:#A31515;">"controls"</span>: [
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"firstNameTextBox"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"textbox"</span>,
                    <span style="color:#A31515;">"label"</span>: <span style="color:#A31515;">"First Name"</span>,
                    <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"firstName"</span>
                },
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"lastNameTextBox"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"textbox"</span>,
                    <span style="color:#A31515;">"label"</span>: <span style="color:#A31515;">"Last Name"</span>,
                    <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"lastName"</span>
                },
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"emailTextBox"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"textbox"</span>,
                    <span style="color:#A31515;">"label"</span>: <span style="color:#A31515;">"Email"</span>,
                    <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"email1"</span>
                },
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"repeatEmailTextBox"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"textbox"</span>,
                    <span style="color:#A31515;">"label"</span>: <span style="color:#A31515;">"Repeat Email"</span>,
                    <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"email2"</span>
                },
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"OKButton"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"button"</span>,
                    <span style="color:#A31515;">"text"</span>: <span style="color:#A31515;">"OK"</span>,
                    <span style="color:#A31515;">"isDialogButton"</span>: <span style="color:Blue;">true</span>,
                    <span style="color:#A31515;">"dialogResult"</span>: <span style="color:#A31515;">"OK"</span>
                },
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"CancelButton"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"button"</span>,
                    <span style="color:#A31515;">"text"</span>: <span style="color:#A31515;">"Cancel"</span>,
                    <span style="color:#A31515;">"isDialogButton"</span>: <span style="color:Blue;">true</span>,
                    <span style="color:#A31515;">"dialogResult"</span>: <span style="color:#A31515;">"Cancel"</span>
                }
            ]
        }
    ]
}
</pre></div>
<h2>Data Model</h2>
<div style="color:Black;background-color:White;"><pre><span style="color:Blue;">var</span> customerData = {
	firstName: <span style="color:#A31515;">"Claudio"</span>,
	lastName: <span style="color:#A31515;">"Lucchesi"</span>,
	email1: <span style="color:#A31515;">"claudio.lucchesi@xmail.com"</span>,
	email2: <span style="color:#A31515;">""</span>,
	<span style="color:Green;">// This is a custom validation function</span>
	<span style="color:Green;">// When return value is a "falsy" value, control is considered valid</span>
	<span style="color:Green;">// When return value is a "thruthy" value, is is treated as an error message</span>
	validate: <span style="color:Blue;">function</span> (control, value) {
		<span style="color:Blue;">if</span> (control.name === <span style="color:#A31515;">"emailTextBox"</span> || control.name === <span style="color:#A31515;">"repeatEmailTextBox"</span>) {
			<span style="color:Blue;">if</span> (<span style="color:Blue;">this</span>.email1 !== <span style="color:Blue;">this</span>.email2) {
				<span style="color:Blue;">return</span> <span style="color:#A31515;">"Emails do not match"</span>
			}
			<span style="color:Blue;">return</span> <span style="color:Blue;">null</span>;
		}
	}
};
</pre></div>
<h2>Code</h2>
<div style="color:Black;background-color:White;"><pre><span style="color:Blue;">var</span> exampleWindow = redui.createNewWindow(<span style="color:#A31515;">"ModelValidationExample"</span>);
exampleWindow.bind(customerData);
exampleWindow.show();
</pre>